<template>
  <el-dialog
    :title="option.title"
    :visible.sync="dialogVisible"
    :modal-append-to-body="true"
    :append-to-body="true"
    width="30%"
    :before-close="handleClose"
  >
    <span>{{ option.message }}</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ option.cancelText }}</el-button>
      <el-button type="primary" @click="handleConfirm">{{ option.confirmText }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'ConfirmDialog',
  data() {
    return {
      option: {
        title: '提示',
        message: '',
        confirmText: '确定',
        cancelText: '取消',
        callbackFunc: null
      },
      dialogVisible: false
    }
  },
  methods: {
    init(option, callbackFunc) {
      this.option = { ...this.option, ...option }
      this.callbackFunc = callbackFunc
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
      this.callbackFunc && this.callbackFunc('close')
    },
    handleCancel() {
      this.dialogVisible = false
      this.callbackFunc && this.callbackFunc('cancel')
    },
    handleConfirm() {
      this.dialogVisible = false
      this.callbackFunc && this.callbackFunc('sure')
    }
  }
}
</script>
<style scoped>
</style>
